 <% layout('sitelayout.html') -%>
<style>
.is-loading {
    background-color: #fff;
    background-image: url(images/load.gif);
    background-repeat: no-repeat;
    background-position: center;
	height:300px;
}
   .newsItem{height:300px;overflow:hidden;cursor:pointer;background:#f00;overflow:hidden;margin-top:30px;border:1px solid #eaeaea;}
   .newsItem .newsimg{width:100%;}
   .newsItem .markTitle{position:absolute;background-color: rgba(0, 0, 0, 0.3); width:-webkit-calc(100% - 32px); 
    width:-moz-calc(100% - 32px); 
    width:calc(100% - 32px); bottom:0px;
    padding:10px 0px;
   }
   .tagsIcon{color:#fff;padding-left:5px;}
   .markTh1{color:#fff;font-size:18px;padding-left:5px;}
   .markTh2 {
    color: #fff7f7;
    font-size: 12px;
    padding-right: 10px;
    padding-top: 5px;
}

.newsItem .popMark{
    display:none;
    text-align:center;
	height:300px;
    width:-webkit-calc(100% - 32px); 
    width:-moz-calc(100% - 32px); 
    width:calc(100% - 32px); 
    overflow: hidden;
    position: absolute;
    background-color: rgba(115, 114, 114, 0.5);
    bottom: 0px;}
.popMark .t1{width:100%;margin-top:40px;text-align:center;font-size:28px;font-weight:600;color:#fff; display:none;}
.popMark .t2 {
    height: 140px;
    padding: 30px 80px;
    margin-bottom: 20px;
    max-height: 110px;
    text-align: center;
    overflow: hidden;
    display: none;
}
.popMark .t2 p{color:#fff;line-height:28px;}
.popMark .t3{width:100%;bottom:20px;text-align:center; display:none;}
.moreBtn {
   
    width: 160px;
    height: 38px;
    line-height: 38px;
    border-radius: 20px;
    margin: 10px auto;
    border: 1px solid;
    transition: all 0.2s 0.5s;
    color: #fff;
    display: block;
}
</style>
<script src="/js/lib/angular.js"></script>
<div ng-app="app" ng-controller="appController" style="min-height: 400px;" >    
    <div class="container">
	
	    <div class="col-md-6" ng-click="openUrl(o)" ng-repeat="o in newsList" repeat-finish >
	      <div class="newsItem">
<div class="is-loading"  >		  
		      <img src="../files/upload/small/{{o.newImg}}" class="newsimg">	
</div>			  
			  <div class="markTitle">
			      <span class="glyphicon glyphicon-tags tagsIcon"></span>
				  <span class="markTh1">{{o.title|subString:30}}</span>
				  <span class="markTh2 pull-right">{{o.createDate| date: 'yyyy年MM月dd日'}}</span>
			  </div>
			  <div class="popMark">
			      <div class="t1">{{o.title|subString:30}}</div>
				  <div class="t2"><p>{{o.content | noHtml}}</p></div>
				  <div class="t3"><span class="moreBtn">查看详情</span></div>
			  </div>
		  </div>
	  </div>
    </div>
    
    <div style="text-align: center;margin-bottom: 30px;margin-top: 30px;"><button class="btn btn-danger" ng-click="getnewsList()" ng-hide="busy==2||busy==1"><span class="glyphicon glyphicon-chevron-down" style="font-size:12px;"></span> 显示更多</button></div>
    <div style="text-align: center;padding-bottom: 20px;" ng-show="busy==1">
    数据正在加载.....
    </div>
     <div style="text-align: center;padding-bottom: 20px;" ng-show="false&&busy==2">
     ------已全部加载------
    </div>
</div>
<script>
   function mark(){
   $(".newsItem").mouseenter(function(){
	$(this).find('.markTitle').hide();
	//$(this).find('img').css("width","110%");
	$(this).find('.popMark').fadeIn();
	$(this).children('.popMark').find('.t1').slideDown(1000);
	$(this).children('.popMark').find('.t2').slideDown(1000);
	$(this).children('.popMark').find('.t3').slideDown(1000);
});
$('.newsItem').mouseleave(function(){
	$(this).find('.markTitle').fadeIn(100);
	$(this).find('.popMark').fadeOut();
	//$(this).find('img').css("width","100%");
	$(this).children('.popMark').find('.t1').hide();
	$(this).children('.popMark').find('.t2').hide();
	$(this).children('.popMark').find('.t3').hide();
});
   }


    var app = angular.module("app", []);
	
	app.directive('repeatFinish', function () {
	return {
		link: function (scope, element, attr) {
			if (true||scope.$last == true) {
				mark();
			}
		}
	}
	})		
	
	app.filter('subString',function(){   
            return function(inputValue,length){         
                if (inputValue.length > length)
                    return inputValue.substr(0, length) + "...";
                return inputValue;
            }
        });
	
    app.filter('noHtml', function () {
        return function (inputValue) {
            var reuslt=inputValue.replace(/<[^>]+>/g,"").replace(/&nbsp;/ig, "");
            if(reuslt.length>300)return reuslt.substring(0,300)+"......";
            return reuslt;
        }
    });

    app.controller('appController', function ($scope, $http,$window) { 
    $scope.busy=0;
    $scope.pageIndex=0;
    $scope.pageSize=4;
   
    $scope.newsList=[];
    $scope.getnewsList=function(){
            $scope.busy=1;
        	var Jsondata = {};
            Jsondata.type="新闻动态";
            $scope.pageIndex++;
            Jsondata.pageIndex=$scope.pageIndex;
            Jsondata.pageSize=$scope.pageSize;
			Jsondata.sort="createDate";
			Jsondata.asc=-1;

            $http.post('/admin/getnewsListByType',Jsondata).success(function (response) {

                $scope.tempList = response;

                if(response.length==0){ $scope.busy=2;;return;}

                i=$scope.newsList.length;
                angular.forEach($scope.tempList, function (o) {
                    i++;
                    o.index=i;
                    $scope.newsList.push(o);
                })
                 $scope.busy=0;
                 if( $scope.pageIndex==1){
                    $("#footer").show();
                    $('.page-loading').delay(0).fadeOut(1000);
                  }

            }).error(function () {
                
            })
        }   
    $scope.getnewsList();
    
	$scope.openUrl=function(o){
	  if(o.Url!=undefined&&o.Url!=null&&o.Url!="")
	  window.open(o.Url);	  
	  else
	  window.open("/newsDetail?id="+o._id);
	}
	
     $(window).bind("scroll", function(e) {
       var ScrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();  
       if($scope.busy==2)return;    
       if(ScrollBottom<100){
        if($scope.busy==1)return; 
        $scope.getnewsList();
       }
   })

});


  </script>

